<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2023/1/28
  Time: 16:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息</title>
    <script src="<%=request.getContextPath()%>/js/index.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/main_user.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont-ali.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.woff">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.woff2">
</head>
<body>
<div id="app">
    <el-menu default-active="1" mode="horizontal">
        <el-menu-item index="1">账号信息</el-menu-item>
    </el-menu>
    <el-row style="margin-top: 10px;border: #5daf34 1px solid">
        <el-col class="el-userInfo-form-col">
            <el-alert
                    :closable="false"
                    title="已完成邮箱绑定"
                    type="success"
                    show-icon>
            </el-alert>
        </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
        <el-col span="10">
            <el-form ref="form" :model="form" label-width="80px">
                <el-row>
                    <el-col span="16">
                        <el-form-item label="昵称：">
                            <el-input v-model="userInfo.user_nickname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col offset="2" span="4">
                        <el-button class="el-icon-edit" @click="editUserNickName" plain>编辑</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="16">
                        <el-form-item label="账号：">
                            <el-input v-model="userInfo.user_account" disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="16">
                        <el-form-item label="性别：">
                            <el-select v-model="userInfo.user_gender" placeholder="请选择">
                                <el-option
                                        v-for="item in form.gender"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col offset="2" span="4">
                        <el-button class="el-icon-edit" @click="editUserGender" plain>确定</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="16">
                        <el-form-item label="手机：">
                            <el-input v-model="userInfo.user_phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col offset="2" span="4">
                        <el-button class="el-icon-edit" @click="editUserPhone" plain>编辑</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="16">
                        <el-form-item label="地址：">
                            <el-input v-model="userInfo.user_address"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col offset="2" span="4">
                        <el-button class="el-icon-edit" @click="editUserAddress" plain>编辑</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="16">
                        <el-form-item label="身份：">
                            <el-tag>{{form.idName}}</el-tag>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="16">
                        <el-form-item label="状态：">
                            <el-tag v-if="form.status=='0'" type="success">正常</el-tag>
                            <el-tag v-if="form.status=='1'" type="danger">异常</el-tag>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="16">
                        <el-form-item label="邮箱：">
                            <el-input v-model="userInfo.user_email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col offset="2" span="4">
                        <el-button class="el-icon-edit" @click="editUserEmail" plain>更换</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                form: {
                    gender: [{
                        value: '男',
                        label: '男'
                    }, {
                        value: '女',
                        label: '女'
                    }],
                    status: 0,
                    /*身份*/
                    idName: '普通用户',
                },
                userInfo: [],
            }
        },
        methods: {
            editUserNickName() {
                //获取昵称
                let NickName = this.userInfo["user_nickname"];
                this.editUserInfo(NickName, "nickname")
            },
            editUserGender() {
                //获取性别
                let Gender = this.userInfo["user_gender"];
                this.editUserInfo(Gender, "gender");
            },
            editUserPhone() {
                //获取手机号码
                let Phone = this.userInfo["user_phone"];
                this.editUserInfo(Phone, "phone");
            },
            editUserAddress() {
                //获取地址
                let Address = this.userInfo["user_address"];
                this.editUserInfo(Address, "address");
            },
            editUserEmail() {
                //获取邮件
                let Email = this.userInfo["user_email"];
                this.editUserInfo(Email, "email");
            },
            editUserInfo(editParam, paramName) {
                axios({
                    url: "/online_website/userMain/editUserInfo",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        userAccount: this.userInfo["user_account"],
                        paramName: paramName,
                        param: editParam,
                    }
                }).then((res) => {
                    if (parseInt(res.data) === 1) {
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                            duration:1500
                        });
                    } else {
                        this.$message({
                            message: '修改失败',
                            type: 'error',
                            duration:1500
                        });
                    }
                })
            }
        },
        created() {
            //获取用户信息的session数据
            var ObjInfo = '<%=session.getAttribute("detailedUserInfo")%>';
            //解析json数据
            this.userInfo = JSON.parse(ObjInfo)["user_detailed"];

        },
    })
</script>
</html>
